<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>精灵图片序列动画演示</title>
<style type="text/css">
@keyframes myani {
0% {
	background-color:#FFF;
	display:block;
	visibility:visible;
}
5% {
	background-position:0 -256px;
}
10% {
	background-position:-128px -256px;
}
15% {
	background-position:-256px -256px;
}
20% {
	background-position:-384px -256px;
}
25% {
	background-position:-512px -256px;
}
30% {
	background-position:-640px -256px;
}
35% {
	background-position:-768px -256px;
}
40% {
	background-position:-896px -256px;
}
50% {
	background-position:0 -384px;
}
55% {
	background-position:-128px -384px;
}
60% {
	background-position:-256px -384px;
}
65% {
	background-position:-384px -384px;
}
70% {
	background-position:-512px -384px;
}
75% {
	background-position:-640px -384px;
}
80% {
	background-position:-768px -384px;
}
100% {
	background-position:-896px -384px;
}
}
div {
	width: 128px;
	height: 128px;
	background: url(spring.png);
	background-position: 0 -256px;
	animation: myani 1s steps(1, start);
/*	-webkit-animation: myani 1s steps(1, start);
	-moz-animation: myani 1s steps(1, start);*/
	animation-iteration-count: 10;
	/*-webkit-animation-iteration-count: 10;
	-moz-animation-iteration-count: 10;*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>